import ReactDOM from 'react-dom/client';
import './index.css'; // 导入样式
import avatar from './images/avatar.jpeg'; // 导入图片

// 应用渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 把下面的代码抽离到一个组件中

// 页面数据
const state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'hot',
  list: [
    {
      id: 1,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: new Date('2021-10-10 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '哎哟，不错哦',
      time: new Date('2021-10-11 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 3,
      author: '五月天',
      comment: '不打扰，是我的温柔',
      time: new Date('2021-10-11 10:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
  ],
};

// 页面结构
const element = (
  <div className="comment-root">
    <div className="comment-container">
      {/* 评论数 */}
      <div className="comment-number">
        <span>5 评论</span>
      </div>

      {/* 排序tab */}
      <div className="tabs-order">
        {/* 类on选中效果 */}
        <div className="on">按xx排序</div>
        <div>按yy排序</div>
      </div>

      {/* 发表评论区 */}
      <div className="comment-send-container">
        <div>
          <img className="user-head" src={avatar} alt="头像" />
        </div>
        <div className="comment-send">
          <div className="textarea-container">
            <textarea
              cols="80"
              rows="5"
              placeholder="发条友善的评论"
              className="ipt-txt"
            />
            <button className="comment-submit">发表评论</button>
          </div>
          <div className="comment-emoji">
            <i className="face"></i>
            <span className="text">表情</span>
          </div>
        </div>
      </div>

      {/* 评论列表区 */}
      <div className="comment-list">
        <div className="comment-item">
          <div>
            <img className="user-head" src={avatar} alt="头像" />
          </div>

          <div className="comment">
            {/* 评论人 */}
            <div className="user">西西弗的守望</div>
            {/* 评论内容 */}
            <p className="text">这个视频太好笑了</p>
            <div className="info">
              <span className="time">2021-10-08 09:05:00</span>
              <span className="like liked">
                <i className="icon" />
              </span>
              <span className="hate hated">
                <i className="icon" />
              </span>
              <span className="btn-hover">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

root.render(element);
